<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>百度WebUploader文件上传demo</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type"text/css" href="${pageContext.request.contextPath}/webuploader/webuploader.css">
		<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/webuploader/webuploader.js"></script>
		<script>
			$(function(){
				// 初始化Web Uploader
				var uploader = WebUploader.create({
			
				    // 选完文件后，是否自动上传。
				    auto: true,
			
				    // swf文件路径
				    swf: '${pageContext.request.contextPath}/webuploader/Uploader.swf',
			
				    // 文件接收服务端。
				    server: '${pageContext.request.contextPath}/servlet/WebUploadHandler',
			
				    // 选择文件的按钮。可选。
				    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
				    pick: '#filePicker',
			
				    // 只允许选择图片文件。
				    accept: {
				        title: 'Images',
				        extensions: 'gif,jpg,jpeg,bmp,png',
				        mimeTypes: 'image/*'
				    }
				});
				
				$list = $("#fileList");
				// 当有文件添加进来的时候
				uploader.on( 'fileQueued', function( file ) {
					//创建缩略图的DOM结构
				    var $li = $(
				            '<div id="' + file.id + '" class="file-item thumbnail">' +
				                '<img>' +
				                '<div class="info">' + file.name + '</div>' +
				            '</div>'
				            ),
				        $img = $li.find('img');
			
			
				    // $list为容器jQuery实例
				    $list.append( $li );
			
				    // 创建缩略图
				    // 如果为非图片文件，可以不用调用此方法。
				    thumbnailWidth = 100;	//缩略图宽度
				    thumbnailHeight = 100;	//缩略图高度
				    uploader.makeThumb( file, function( error, src ) {
				        if ( error ) {
				            $img.replaceWith('<span>不能预览</span>');
				            return;
				        }
			
				        $img.attr( 'src', src );
				    }, thumbnailWidth, thumbnailHeight );
				});
				
				// 文件上传过程中创建进度条实时显示。
				uploader.on( 'uploadProgress', function( file, percentage ) {
				    var $li = $( '#'+file.id ),
				        $percent = $li.find('.progress span');
			
				    // 避免重复创建
				    if ( !$percent.length ) {
				        $percent = $('<p class="progress"><span></span></p>')
				                .appendTo( $li )
				                .find('span');
				    }
					
				    $percent.css( 'width', percentage * 100 + '%' );
				});
			
				// 文件上传成功，给item添加成功class, 用样式标记上传成功。
				uploader.on( 'uploadSuccess', function( file ) {
				    $( '#'+file.id ).addClass('upload-state-done');
				});
			
				// 文件上传失败，显示上传出错。
				uploader.on( 'uploadError', function( file ) {
				    var $li = $( '#'+file.id ),
				        $error = $li.find('div.error');
			
				    // 避免重复创建
				    if ( !$error.length ) {
				        $error = $('<div class="error"></div>').appendTo( $li );
				    }
			
				    $error.text('上传失败');
				});
			
				// 完成上传完了，成功或者失败，先删除进度条。
				uploader.on( 'uploadComplete', function( file ) {
				    $( '#'+file.id ).find('.progress').remove();
				});
			})
		</script>
	</head>
	<body>
		<!--dom结构部分-->
		<div id="uploader-demo">
		    <!--用来存放item-->
		    <div id="fileList" class="uploader-list"></div>
		    <div id="filePicker"></div>
		</div>
	</body>
</html>
